﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>系统初始化</title>
    @Styles.Render("~/bundles/css")
    <link rel="stylesheet" href="~/layui/extend/steps/style.css">
    <style>
        .layui-table, .layui-table-view {
            margin: 0;
        }

        .form .layui-form-item {
            min-height: 40px;
            border-bottom: 1px dashed #ccc;
        }

        .form .layui-form-label {
            cursor: pointer;
        }

            .form .layui-form-label:hover {
                color: red;
            }

        .design .layui-form-label {
            width: auto;
        }

        .design {
            border-right: 1px solid #ccc;
            padding-right: 10px;
            margin-right: 10px;
        }

        body .editTpl {
            width: 800px !important;
            height: 500px;
            background-color: #fff;
            box-shadow: none;
        }

            body .editTpl .layui-layer-content {
                padding: 0 20px;
                height: 480px;
            }

            body .editTpl .layui-form-item .layui-inline {
                min-width: 170px;
            }
        .disabled .layui-form-label {
            color:#ccc;
        }
        .tableName {
            border-bottom:1px dashed #ccc;
        }
        
        .tableName .layui-form-label, .tableName input {
            font-weight: bold;
        }
        .tableName input {
            color:red !important;
        }
 
    </style>
</head>
<body>
    <blockquote class="layui-elem-quote layui-text">
        表单设计器
    </blockquote>

    <div class="layui-row" style="">
        <div class="layui-col-md2">
            <div class="design">
                <form class="layui-form" action="">

                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">文本框</label>
                            <div class="layui-input-inline">
                                <input type="tel" name="phone" placeholder="文本框" lay-verify="required" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">数字框</label>
                            <div class="layui-input-inline">
                                <input type="tel" name="phone" placeholder="decimal(18,2)" lay-verify="required|number" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">整数框</label>
                            <div class="layui-input-inline">
                                <input type="tel" name="phone" placeholder="int" lay-verify="required|number" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-block">
                            <label class="layui-form-label">复选框</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="like[write]" title="写作">
                                <input type="checkbox" name="like[read]" title="阅读" checked="">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item" pane="">
                        <div class="layui-block">
                            <label class="layui-form-label">原始复选框</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked="">
                                <input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-block">
                            <label class="layui-form-label">单选框</label>
                            <div class="layui-input-block">
                                <input type="radio" name="sex" value="男" title="男" checked="">
                                <input type="radio" name="sex" value="女" title="女">
                            </div>
                        </div>

                    </div>
                    <div class="layui-form-item layui-form-text">
                        <div class="layui-block">
                            <label class="layui-form-label">普通文本域</label>
                            <div class="layui-input-block">
                                <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-block">
                            <label class="layui-form-label">下拉菜单</label>
                            <div class="layui-input-block">
                                <select name="quiz">
                                    <option value="男">男</option>
                                    <option value="女">女</option>
                                </select>
                            </div>
                        </div>

                    </div>

                </form>
            </div>
        </div>
        <div class="layui-col-md10" >
            <div>
                <form class="layui-form" action="/" method="post">
                    <div class="layui-form-item tableName">
                        <div class="layui-inline">
                            <label class="layui-form-label">表名</label>
                            <div class="layui-input-inline">
                                <input type="tel" id="TableName" placeholder="请输入表名" lay-verify="required" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">表中文名</label>
                            <div class="layui-input-inline">
                                <input type="tel" id="TableDisplayName" placeholder="请输入表中文名" lay-verify="required" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                </form>
                <form class="layui-form form" lay-filter="formDesign">
                    
                    <div class="layui-form-item">
                    </div>
                    <div class="layui-form-item">
                    </div>
                    <div class="layui-form-item">
                    </div>
                    <div class="layui-form-item">
                    </div>
                    <div class="layui-form-item">

                    </div>
                </form>
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" id="addNewRow" style="width:100px;">新增行</button>

                    <button class="layui-btn" lay-submit="saveForm" lay-filter="saveForm"  style="width:100px;">保存</button>
                     
                </div>
            </div>
        </div>
    </div>

    @*<button id="preBtn">上一步</button>
        <button id="nextBtn">下一步</button>
        <button id="goBtn">跳转的指定的步骤</button>*@

    <div id="editTpl" class="layui-row layui-hide">

        <div class="layui-col-md12">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>字段修改</legend>
            </fieldset>
            <form class="layui-form"  lay-filter="fieldDesign">
                <div class="layui-form-item">
                    <div class="layui-block">
                        <label class="layui-form-label">字段类型</label>
                        <div class="layui-input-block">
                            <input type="radio" name="fType" value="nvarchar" title="文本" checked="">
                            <input type="radio" name="fType" value="numeric" title="数字">
                            <input type="radio" name="fType" value="datetime" title="日期">
                            <input type="radio" name="fType" value="int" title="整数">
                            <input type="radio" name="fType" value="ntext" title="长文本">
                            <input type="radio" name="fType" value="bool" title="布尔值">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">字段中文名</label>
                        <div class="layui-input-inline">
                            <input type="tel" name="FieldDisplayName" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">字段名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="FieldName" lay-verify="required|FieldName" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">最大长度</label>
                        <div class="layui-input-inline">
                            <input type="text" name="maxLength" lay-verify="required|number" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">代码字典</label>
                        <div class="layui-input-inline">
                            <select name="CodeName">
                                <option value="" selected="">请选择</option>
                                <option value="性别">性别</option>
                                <option value="学历">学历</option>
                                <option value="是否">是否</option>
                            </select>
                        </div>
                    </div>
                </div>
                @*<div class="layui-form-item">
                    <div class="layui-block">
                        <div class="layui-inline">
                            <label class="layui-form-label">显示方式</label>
                            <div class="layui-input-block">
                                <input type="radio" name="DisplayType" value="Text" title="文本" checked="">
                                <input type="radio" name="DisplayType" value="Number" title="数字">
                                <input type="radio" name="DisplayType" value="DatePicker" title="日期">
                                <input type="radio" name="DisplayType" value="Select" title="下拉菜单">
                                <input type="radio" name="DisplayType" value="CheckBox" title="多选框列表">
                                <input type="radio" name="DisplayType" value="OriginalCheckBox" title="原始多选框">
                                <input type="radio" name="DisplayType" value="Radio" title="单选框列表">
                                <input type="radio" name="DisplayType" value="Switcher" title="开关">
                                <input type="radio" name="DisplayType" value="Tree" title="树">
                                <input type="radio" name="DisplayType" value="TextArea" title="多行文本">
                            </div>
                        </div>
                    </div>
                </div>*@
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">行内显示</label>
                        <div class="layui-input-inlie">
                            <input type="checkbox"  name="isInline" lay-skin="switch" lay-filter="switchTest" lay-text="是|否">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">搜索条件</label>
                        <div class="layui-input-inlie">
                            <input type="checkbox"   name="isSearch" lay-skin="switch" lay-filter="switchTest" lay-text="是|否">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">列表显示</label>
                        <div class="layui-input-inlie">
                            <input type="checkbox"  name="showInList" lay-skin="switch" lay-filter="switchTest" lay-text="是|否">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">隐藏</label>
                        <div class="layui-input-inlie">
                            <input type="checkbox"  name="isHidden" lay-skin="switch" lay-filter="switchTest" lay-text="是|否">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">必填</label>
                        <div class="layui-input-inlie">
                            <input type="checkbox"  name="isRequired" lay-skin="switch" lay-filter="switchTest" lay-text="是|否">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn btn-info" lay-submit="" lay-filter="formField">保存</button>
                        <a class="layui-btn layui-btn-danger btnDelField" >删除字段</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div>

    </div>
    <script>
        var appUrl = '@Url.Action("")';
    </script>
    <script src="~/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="~/layui/layui.js"></script>
    <script type="text/javascript" src="~/layui/config.js"></script>
    <script>
        //字段数据
        var fieldList = [], index = 0, editIndex = 0;
        var field = {
            FieldName: '',
            FieldDisplayName: '',
            isSearch: false,
            isHidden: false,
            showInList: true,
            maxLength: 50,
            isInline: false,
            isRequired: true,
            CodeName: '',
            DisplayType: ''
        };

        layui.use(['jquery', 'steps', 'form', 'table'], function () {
            var table = layui.table;
            var form = layui.form;
            var $ = layui.$;


            var $step = $("#step_demo").step();

            $("#addNewRow").click(function () {
                $('.form').append("<div class=\"layui-form-item\"></div>");
                return false;
            });

            form.verify({
                FieldName: function (value) {
                    if (!new RegExp("(^_([a-zA-Z0-9]_?)*$)|(^[a-zA-Z](_?[a-zA-Z0-9])*_?$)").test(value)) {
                        return '字段名称不符合规范';
                    }                    
                } 
            }); 
            
            form.on('submit(saveForm)', function (data) {
                if (!$('#TableName').val() || !$('#TableDisplayName').val()) {
                    layer.alert('请输入表名！', { icon: 2 });
                    return false;
                }
                if (!fieldList.length) {
                    layer.alert('请设计表单！', { icon: 2 });
                    return false;
                }
                for (var i = 0; i < fieldList.length; i++) {

                    if (!fieldList[i].FieldName) {
                        layer.msg('请指定【' + fieldList[i].FieldDisplayName + '】的字段名')
                        return false;
                    }
                }
                var data = {
                    TableName: $('#TableDisplayName').val(),
                    ClassName: $('#TableName').val(),
                    FieldList: fieldList
                }
                //生成class文件
                $.ajax({
                    url: '@Url.Action("genClassFile")',
                    data: { json: JSON.stringify(data) },
                    success: function (res) {
                        var d = JSON.parse(res);
                        if (d.success) {
                            layer.msg('生成成功！');
                        } else {
                            layer.alert('生成失败！', { icon: 2 });
                        }
                    }
                })
                return false;
            });

            form.on('submit(formField)', function (data) {
                console.log(data.field);
                //更新form字段显示
                var oField = $('.form .layui-form-item [data-id=' + editIndex + ']');
                oField.find('.layui-form-label').text(data.field.FieldDisplayName);
                if (data.field.isHidden) {
                    oField.addClass('disabled');
                } else {
                    oField.removeClass('disabled');
                }
                if (data.field.isInline) {
                    oField.removeClass('layui-block').addClass('layui-inline');
                    oField.find('.layui-input-block').removeClass('layui-input-block').addClass('layui-input-inline');
                }
                //更新全局变量
                fieldList[editIndex].FieldDisplayName = data.field.FieldDisplayName;
                fieldList[editIndex].FieldName = data.field.FieldName;
                fieldList[editIndex].maxLength = data.field.maxLength;
                fieldList[editIndex].CodeName = data.field.CodeName;
                fieldList[editIndex].isSearch = data.field.isSearch ? true : false;
                fieldList[editIndex].isHidden = data.field.isHidden ? true : false;
                fieldList[editIndex].showInList = data.field.showInList ? true : false;
                fieldList[editIndex].isInline = data.field.isInline ? true : false;
                fieldList[editIndex].isRequired = data.field.isRequired ? true : false;

                layer.closeAll();

                return false;
            });
             
            function addEditEvent() {
                $('.form .layui-form-label').unbind('click').click(function () {
                    //初始属性设置
                    var editTpl = $('#editTpl');
                    editIndex = $(this).parent().attr('data-id');
                    var f = fieldList[editIndex];
                    
                    layer.open({
                        type: 1,
                        title: '字段修改',
                        closeBtn: 1,
                        shadeClose: true,
                        skin: 'editTpl',
                        content: editTpl.html(),
                        success: function () {
                            $('.editTpl [name="FieldDisplayName"]').val(f.FieldDisplayName);
                            $('.editTpl [name="FieldName"]').val(f.FieldName);
                            $('.editTpl [name="maxLength"]').val(f.maxLength);
                            $('.editTpl [name="CodeName"]').val(f.CodeName);
                            if (f.isInline) { $('.editTpl [name="isInline"]').attr('checked', 'checked'); }
                            if (f.isSearch) { $('.editTpl [name="isSearch"]').attr('checked', 'checked'); }
                            if (f.showInList) { $('.editTpl [name="showInList"]').attr('checked', 'checked'); }
                            if (f.isHidden) { $('.editTpl [name="isHidden"]').attr('checked', 'checked'); }
                            if (f.isRequired) { $('.editTpl [name="isRequired"]').attr('checked', 'checked'); }

                            form.render(null, 'fieldDesign');
                            $(".btnDelField").click(function () {
                                layer.open({
                                    content: '确定删除字段？'
                                    , btn: ['确定', '取消']
                                    , yes: function (index, layero) {
                                        layer.closeAll();
                                        layer.msg('删除成功！');
                                        //删除数组元素 ES6语法
                                        fieldList = fieldList.filter(({ id }) => id != editIndex);
                                        //删除form元素
                                        $('.form .layui-form-item [data-id=' + editIndex + ']').remove();
                                    }
                                });
                                return false;
                            });
                        }
                    });




                })
            }


            function bindDragEvent() {
                $('.layui-inline,.layui-block').attr('draggable', 'true');
                $('.layui-inline,.layui-block').on('dragstart', function (ev) {
                    console.log($(this).index() + "|" + $(this).parent().index() + "|" + $(this).parent().parent().parent().hasClass('design'))
                    ev.originalEvent.dataTransfer.setData("Text", $(this).index() + "|" + $(this).parent().index() + "|" + $(this).parent().parent().parent().hasClass('design'));
                });
                $('.layui-form-item').on('dragover', function (ev) {
                    ev.preventDefault();
                });


                $('.form .layui-form-item').on('drop', function (ev) {
                    ev.preventDefault();
                    var data = ev.originalEvent.dataTransfer.getData("Text");
                    var rowIndex = data.split('|')[1];
                    var itemIndex = data.split('|')[0];
                    var bFromDesign = data.split('|')[2] == 'true' ? 1 : 0;
                    if (bFromDesign) {
                        var oDiv = $('.design .layui-form-item').eq(rowIndex).find('>div').eq(itemIndex);
                    } else {
                        var oDiv = $('.form .layui-form-item').eq(rowIndex).find('>div').eq(itemIndex);
                    }

                    var oBlock = oDiv.find('.layui-input-block');
                    if (oBlock.length) {
                        oDiv.removeClass('layui-block').addClass('layui-inline');
                        //oBlock.removeClass('layui-input-block').addClass('layui-input-inline');
                    }
                    if ($(this).find('.layui-inline').length == 0) {
                        oDiv.find('.layui-input-inline').removeClass('layui-input-inline').addClass('layui-input-block');
                    }
                    if ($(this).find('.layui-block').length > 0) {
                        $(this).find('.layui-block').removeClass('layui-block').addClass('layui-inline');
                    }
                    if ($(this).find('>div').length == 0) {
                        oDiv.removeClass('layui-inline').addClass('layui-block');
                        oDiv.find('.layui-input-inline').removeClass('layui-input-inline').addClass('layui-input-block');
                    }
                    if (bFromDesign) {
                        //加载从设计器中拖拉的克隆一个对象,包含事件
                        var newField = $.extend({}, field);
                        newField.id = index;
                        newField.FieldDisplayName = oDiv.find('.layui-form-label').text();
                        fieldList.push(newField);
                        var newDiv = oDiv.clone(true);
                        $(this).append(newDiv.attr('data-id', index));
                        index++;
                        addEditEvent();
                        form.render(null,'formDesign');

                    } else {
                        $(this).append(oDiv);
                    }

                });
            }
            bindDragEvent();


            $('.layui-form-label').on('dblclick', function () {

                fieldEdit($(this));
            })




            console.log(table);
        });
    </script>
</body>


</html>
